<template>
 <div class='w750' :class="Nomsg ? 'white-bg' : ''">
    <header>
        <div class="header-box">
            <div class="header-back" @click="goback"><span  class="back-img"><img src="../../../assets/images/back.png" alt=""></span></div>
            <div class="header-search">
                <p class="ser-txt">我的消息</p>
            </div>
            <div class="header-mes"  @click="edit"><span  class="mes-txt">{{(clooseFlag && InformationArr.length) ? '完成' : '编辑'}}</span></div>
            <!-- <div class="header-mes" v-else><span  class="mes-txt">&emsp;&emsp;</span></div> -->
        </div>
    </header>
    <div class="message" id="message" :class="[clooseFlag ? 'edit': '',themes.theme]" >
       

        <!-- 系统消息 -->
        <van-list
            v-model="paging.loading"
            :finished="paging.finished"
            :finished-text="!paging.emptylist?'没有更多了':''"
            @load="onLoadMore"
            :immediate-check="false"
            :error.sync="paging.error"
            error-text="请求失败，点击重新加载"
            v-if="paging.tab"
        >
            
            <div class="message-con">
                
               <div class="mes-list" v-for="(item, index) in InformationArr" :key="index" :class="(item.isGlobal == 1 && (item.isgloStatus == null || item.isgloStatus == 0)) || (item.isGlobal == 0 && (item.notgloStatus == null || item.notgloStatus == 0)) ? 'unread' : ''"  v-if="(item.isGlobal == 1 && item.isgloStatus > -1) || (item.isGlobal == 0 && item.notgloStatus > -1)" @click="gomsgDet(item.msgId)">
                   <template>
                        <span class="choose" :class="item.selected ? 'cur' : '' " @click.stop="changeStatus(index)"></span>
                        <span class="mes-icon system-msg" style="background: #1fafff;"><img src="../../../assets/images/mes-system.png" alt=""><i class="num"></i></span>
                        <div class="mes-con">
                            <h4 class="msg-tit">{{item.title}}</h4>
                            <p class="msg-con">点击查看信息详情</p>
                        </div>
					    <em class="time">{{ item.recDate | dateformat('YYYY-MM-DD')}}</em>
                   </template>
				</div>
            </div>

            <template v-if="InformationArr.length">
                <div v-if="clooseFlag">
                    <div class="message-foot" style="display:flex;">
                        <div class="check-all" @click="allchangeStatus"><span class="choose" :class="allSelected ? 'cur' : ''"></span>全选</div>
                        <span class="foot-btn" @click='detCollection'>删除</span>
                    </div>
                </div>
            </template>

        </van-list>
        <!-- /系统消息 -->

        
        <Noempty :pic="require('../../../assets/images/mes-empty.png')"  :title="'暂无信息'"  v-if="paging.emptylist && !paging.error" />
	</div>

 </div>
</template>

<script>
import Noempty from 'components/Noempty/Noempty';
import {mapState} from 'vuex'
import { news , newList, deleteList} from "api/message";
import PageUtil from 'utils/PageUtil';
const pageUtil = new PageUtil(newList, {field: {
    list: "InformationArr"
}});
 export default {
   data () {
     return {
        clooseFlag: false, //底部选择
        InformationArr: [],
        total: null,
        Nomsg: false,
        selected: false,   //自定义一个列表默认为flase， 不选中
        allSelected: false,  //自定义一个全选默认为flase，不选择·
        paging: {
            tab: false,
            loading: false,
            finished: false,
            error: false, // 是否错误
            emptylist: false,// 是否显示列表为空时的样式
        },
        imMessageData:[]
     }
   },
    mounted() {
       let that = this

      
        pageUtil.loadListByPage(that,{pageSize: 10},{
            listHandler(resultList){
                resultList.forEach((item,index) => {
                    if(that.allSelected) {
                        item.selected = true
                    }else{
                        item.selected = that.selected
                    }
                });
                return resultList;
            }
        })
        
        // this.getNewList(1,false)
        
   },
   methods: {
        goback() {
            this.$router.back();
            this.$router.isBack = true
        },
        //加载更多
        onLoadMore() {
           pageUtil.loadListByPageMore();
            this.$forceUpdate()
        },
       //唤起编辑栏
        edit() {
            this.clooseFlag = !this.clooseFlag
            if (this.clooseFlag == false) {
                let resultList = this.InformationArr
                    resultList.forEach((item,index) => {
                        item.selected = false
                    })
                    this.InformationArr = resultList
                    this.allSelected = false
            }
        },
        //单个选择
        changeStatus(index) {
            let resultList = this.InformationArr
            this.InformationArr[index].selected = !this.InformationArr[index].selected
            this.$forceUpdate()
            this.allSelected = resultList.every(item => item.selected == true)
        },
        //全选
        allchangeStatus() {
            let resultList = this.InformationArr
            this.allSelected = !this.allSelected

            resultList.forEach((element,index) => {
                if((element.isGlobal == 1 && element.isgloStatus > -1) || (element.isGlobal == 0 && element.notgloStatus > -1)) {
                    let allChecked = this.allSelected,
                    flag = allChecked ? true : false;
                    this.InformationArr[index].selected =  flag 
                }
            })

        },
        //删除
        detCollection() {
            let resultList = this.InformationArr
            let obj
            let parme
            let that = this

            // 过滤出符合条件
            let filterArr =  resultList.filter(element =>  {
                if ((element.isGlobal == 1 && element.isgloStatus > -1) || (element.isGlobal == 0 && element.notgloStatus > -1)) {
                  return  element.selected ? true : false
                }
            })

            filterArr.map(element => {
                obj = '{"isGlobal"' + ':' + '"' + element.isGlobal + '"' + ',' + '"msgId"' + ':' + '"' +  element.msgId + '"'+'}'
                parme = parme + ',' + obj;
            })


            //没有选中的时候
            if (!resultList.some(item =>  item.selected == true)) {
                this.$toast('请选择再进行操作哦~~')
                return
            }

            parme = parme.substr(10)

            this.$dialog.confirm({
                title: '删除信息',
                message: '是否确认此操作'
            }).then(() => {
                // on confirm
                deleteList({
                   entities:  "[" + parme + "]"
                }).then(res =>{
                    if (res.status == 1) {
                        this.InformationArr = resultList.filter(item => !filterArr.some(e => e === item))
                        this.$toast('删除成功')
                        setTimeout(() => {
                            let flag = this.InformationArr.length == 0 ? true : false
                            this.Nomsg = flag
                        }, 1500);
                    }else {
                        this.$toast(res.msg)
                    }
                })
            }).catch(() => {
                // on cancel
            });

        },
        //去信息详细
        gomsgDet(msgId) {
            this.$router.push({
				path: `/messageDet`,
				query: {
					msgId: msgId
				}
			});
        },
       
		
        goImMessage(shopId){
            this.$router.push({
				path: `/serviceChat`,
				query: {
                    consultId:shopId,
                    consultType:"other",
                    shopId:shopId
				}
			});
        },
   },
   computed: {
       ...mapState(['themes']),
   },
   components: {
       Noempty
   }
 }
</script>

<style src="../../../assets/css/style/my-style.css" scoped></style>
<style src="../../../assets/css/message.css" scoped></style>
<style scoped>
    .mes-list.action {
        color: #999;
    }
    .Immsg-num {
        position: absolute;
        display: block;
        text-align: center;
        padding: 0 5px;
        height: 18px;
        line-height: 18px;
        font-family: arial;
        background:#f62;
        right: -5px;
        top: -5px;
        color: #fff;
        font-size: 12px;
        border-radius: 18px;
    }

    .message.edit .message-con .mes-list .mes-con {
        padding: 0 75px 0 78px;
    }
    .message.edit .message-con .mes-list .mes-icon {
        left: 28px;
    }
</style>
